<template>
    <el-dialog v-model="off.show" :title="title" :width="width" :before-close="cancleDialog">
        <slot name="default"></slot>
        <template #footer v-if="footer">
            <div class="dialog-footer">
                <el-button @click="cancleDialog">取消</el-button>
                <el-button type="primary" @click="submitDialog">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {reactive} from 'vue'

const $emit = defineEmits(['submit', 'cancle'])
const props = defineProps(['title', 'width', 'footer'])

const off = reactive({
    show: false,
})
// 关闭按钮
const closeDialog = () => {
    off.show = false
}
// 开启
const openDialog = () => {
    off.show = true
}

// 确认按钮
const submitDialog = () => {
    $emit('submit')
}
//取消按钮
const cancleDialog = () => {
    $emit('cancle')
}

// 暴露出去，父组件调用
defineExpose({
    closeDialog,
    openDialog,
    submitDialog,
})
</script>

<style lang="scss" scoped></style>
